<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='720px' @close="resetForm">
        <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">选择商品</span>
                <span class="icon_btn icon_btn_32" @click="resetForm"><img src="@/assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="shop_search">
                <el-input placeholder="请输入" suffix-icon="el-icon-search" clearable style="width:400px" v-model="queryInfo.values" class="gd_input" @change="rankGoods">
                    <el-select v-model="queryInfo.field" slot="prepend" placeholder="" class="gd_select" @change="changeType">
                        <el-option label="SKU_ID" value="sku_id"></el-option>
                        <el-option label="商品标题" value="title"></el-option>
                        <el-option label="SPU_ID" value="item_group_id"></el-option>
                    </el-select>
                </el-input>
            </div>
            <div class="adver_tips">由于TT媒体侧API的限制，会在列表展示更多的商品，请选择实际可投的商品</div>
            <div class="demand_center flex">
                <el-table :data="tableData" height="100%" class="com_table" ref="multipleTable" :row-key="(row)=>{ return row.item_group_id}" @selection-change="selectGoods">
                    <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column prop="full_name" label="商品">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <div class="tk_gd_img">
                                    <img :src="scope.row.image_url" alt="" class="tk_gd_img">
                                </div>
                                <div class="tk_gd_info">
                                    <div class="tk_gd_name">{{scope.row.title}}</div>
                                    <div class="tk_gd_id">SPU ID：{{scope.row.item_group_id}}</div>
                                    <div class="tk_gd_id">SKU ID：{{scope.row.sku_id}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格" width="110"></el-table-column>
                    <el-table-column prop="google_product_category" label="分类" width="110">
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :current-page="queryInfo.page" :total="total">
                </el-pagination>
            </div> -->
            <div class="goods_footer flexbox flexcenter flexbetween pl_20 pr_20">
                <div class="gd_text">已选：<span class="blue" :class="{'red':has_check.length>20}">{{has_check.length}}</span>/20</div>
                <div class="">
                    <el-button class="el-button-width" size="small" @click="resetForm">关 闭</el-button>
                    <el-button type="primary" class="el-button-width" size="small" @click="addGoods">保 存</el-button>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    props: ["dataForm"],
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            queryInfo: {
                // page: 1,
                advertiser_id: "",
                catalog_id: "",
                bc_id: "",
                field: "sku_id",
                values: "",
            },
            // total: 0,
            tableData: [],
            has_check:[]
        };
    },
    created() {
        
    },
    methods: {
        getData(){
            this.dialogVisible = true
            this.has_check = JSON.parse(JSON.stringify(this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].item_group_ids))
            this.queryInfo.advertiser_id =  this.dataForm.base[0].advertiser_id
            this.queryInfo.catalog_id =  this.dataForm.base[0].catalog_id
            this.queryInfo.bc_id =  this.dataForm.base[0].store_authorized_bc_id
            this.getShopList();
            this.$nextTick( ()=> {
                this.has_check.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row, true)
                })
            })
            
        },
        //获取商品
        async getShopList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/productList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data
            }
        },

        selectGoods(v){
            this.has_check = v
        },

        rankGoods() {
            this.queryInfo.page = 1;
            this.getShopList();
        },
        
        // 选择筛选类型
        changeType(){
            if(!this.queryInfo.values){
                return
            }else{
                this.queryInfo.page = 1;
                this.getShopList();
            }
        },

        // 关闭重置表单
        resetForm() {
            this.$refs.multipleTable.clearSelection();
            // this.queryInfo.page = 1
            this.queryInfo.values = ""
            this.queryInfo.field = "sku_id"
            this.has_check = []
            this.tableData = []
            this.dialogVisible = false;
        },

        addGoods(){
            if(this.has_check.length>20){
                this.$message.error("不能超出最大限制数量");
                return
            }else{
                this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].item_group_ids = this.has_check
                this.resetForm()
                this.sessionSave()
            }
        },

        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getShopList();
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>
<style scoped>
.demand_center {
    padding: 20px 20px 0 20px;
}
.shop_search {
    padding: 20px 20px 0 20px;
}
.tk_gd_img {
    width: 90px;
    height: 90px;
    border-radius: 2px;
    display: block;
}
.tk_gd_info {
    margin-left: 20px;
}
.tk_gd_name {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tk_gd_id {
    font-size: 12px;
    color: #616c85;
    line-height: 17px;
}
.goods_footer{
    height: 72px;
    border-top: 1px solid #ebebeb;
}
.gd_text{
    font-size: 14px;
    color: #B4B7BD;

}
.blue{
    color: #4475ff;
}
.red{
    color: #FE6262;
}
/deep/ .gd_select .el-input {
    width: 100px;
}
/deep/ .gd_input .el-input-group__prepend {
    background-color: #fff;
}
.adver_tips{
    line-height: 28px;
    padding: 0 20px;
    font-size: 14px;
    color: #ff5e00;
    background: #ffeadd;
    margin: 12px 20px 0;
    border-radius: 4px;
}
</style>


